<template>
	<view class="city-container">

		<view class="city-search-box" style="display: flex;align-items: center;width: 100%;">
			<!-- 城市选择下拉框 -->
			<view class="city-selector">
				<view class="selector-wrapper">
					<text class="selector-text">{{ selectedCity }}</text>
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="search-section">
				<view class="search-box">
					<image src="/static/image/icon_search.png" class="search-icon" mode="aspectFit"></image>
					<input type="text" placeholder="搜索写字楼/小区" v-model="searchKeyword" class="search-input"
						@input="onSearchInput" placeholder-class="search-placeholder" />
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<!-- 当前定位 -->
			<view class="current-location">
				<view class="location-item" @click="refreshLocation">
					<image src="/static/image/icon_location.png" class="location-icon" mode="aspectFit"></image>
					<view class="location-info">
						<text class="location-title">当前定位</text>
						<text class="location-desc">{{ currentAddress }}</text>
						<image src="/static/image/icon_refresh.png" class="refresh-btn" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 搜索结果 -->
			<view v-if="searchKeyword && searchResults.length > 0" class="search-results">
				<view v-for="(item, index) in searchResults" :key="index" class="search-item"
					@click="selectAddress(item)">
					<text class="search-title">{{ item.name }}</text>
					<text class="search-desc">{{ item.address }}</text>
				</view>
			</view>

			<!-- 城市列表 -->
			<view v-else class="city-list-container">
				<!-- 热门城市 -->
				<view class="hot-cities">
					<view class="section-title">热门城市</view>
					<view class="hot-city-grid">
						<view v-for="(city, index) in hotCities" :key="index" class="hot-city-item"
						@click="selectCity(city)">
							<text class="hot-city-text">{{ city.name }}</text>
						</view>
					</view>
				</view>

				<!-- 按字母分组的城市列表 -->
				<view class="alphabetic-cities">
					<view v-for="(group, letter) in alphabeticCities" :key="letter" :id="'letter-' + letter"
						class="city-group">
						<view class="group-title">{{ letter }}</view>
						<view class="city-items">
							<view v-for="(city, index) in group" :key="index" class="city-item" @click="selectCity(city)">
								<text class="city-name">{{ city.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 字母索引 -->
			<view class="letter-index">
				<view v-for="letter in letters" :key="letter" class="letter-item"
					:class="{ 'active': currentLetter === letter }" @click="scrollToLetter(letter)"
					@touchstart="onLetterTouchStart(letter)" @touchend="onLetterTouchEnd">
					<text class="letter-text">{{ letter }}</text>
				</view>
			</view>

			<!-- 字母提示 -->
			<view v-if="showLetterTip" class="letter-tip">
				<text class="tip-text">{{ currentLetter }}</text>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	name: "city",
	data() {
		return {
			statusBarHeight: 0,
			navBarHeight: 0,
			searchKeyword: '',
			selectedCity: '苏州市',
			currentAddress: 'Kumamon科技产业园',
			currentLetter: 'A',
			showLetterTip: false,
			searchResults: [],

			// 热门城市
			hotCities: [
				{ name: '苏州', code: '0512', available: true },
				{ name: '南京', code: '025', available: true },
				{ name: '上海', code: '021', available: true },
				{ name: '黑龙江', code: '0451', available: false }
			],

			// 可用城市（后台开通的城市）
			availableCities: [
				{ name: '安庆市', code: '0556', available: true },
				{ name: '安顺市', code: '0851', available: true },
				{ name: '安阳市', code: '0372', available: true },
				{ name: '亳州市', code: '0558', available: true },
				{ name: '北京市', code: '010', available: true },
				{ name: '苏州市', code: '0512', available: true },
				{ name: '南京市', code: '025', available: true },
				{ name: '上海市', code: '021', available: true }
			],

			// 字母索引
			letters: ['A', 'B', 'N', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
		};
	},

	computed: {
		// 按字母分组的城市
		alphabeticCities() {
			const groups = {};

			// 城市名称和对应首字母的映射
			const cityLetterMap = {
				'安庆市': 'A',
				'安顺市': 'A',
				'安阳市': 'A',
				'亳州市': 'B',
				'北京市': 'B',
				'苏州市': 'N', // 苏州按拼音首字母是S，但UI显示在N下
				'南京市': 'N'
			};

			this.availableCities.forEach(city => {
				const letter = cityLetterMap[city.name] || city.name.charAt(0);
				if (!groups[letter]) {
					groups[letter] = [];
				}
				groups[letter].push(city);
			});

			return groups;
		}
	},

	methods: {
		// 获取系统信息
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;

			if (uni.getMenuButtonBoundingClientRect) {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;
			} else {
				this.navBarHeight = 44;
			}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack();
		},

		// 显示更多选项
		showMore() {
			uni.showActionSheet({
				itemList: ['使用微信地图', '刷新位置', '意见反馈'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.openWechatMap();
					} else if (res.tapIndex === 1) {
						this.refreshLocation();
					} else if (res.tapIndex === 2) {
						this.showFeedback();
					}
				}
			});
		},

		// 打开微信小程序地图
		openWechatMap() {
			uni.chooseLocation({
				success: (res) => {
					this.currentAddress = res.address || res.name;
					// 选择地址后返回首页
					this.backToIndex();
				},
				fail: (err) => {
					uni.showToast({
						title: '获取位置失败',
						icon: 'none'
					});
				}
			});
		},

		// 获取当前位置
		getCurrentLocation() {
			uni.showLoading({
				title: '定位中...'
			});

			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					// 根据经纬度获取地址信息
					this.getAddressByLocation(res.latitude, res.longitude);
				},
				fail: (err) => {
					uni.hideLoading();
					uni.showToast({
						title: '定位失败，请检查定位权限',
						icon: 'none'
					});
				}
			});
		},

		// 根据经纬度获取地址
		getAddressByLocation(latitude, longitude) {
			// TODO: 调用逆地理编码API获取地址
			setTimeout(() => {
				uni.hideLoading();
				this.currentAddress = 'Kumamon科技产业园';
				uni.showToast({
					title: '定位成功',
					icon: 'success'
				});
			}, 1000);
		},

		// 刷新位置
		refreshLocation() {
			this.getCurrentLocation();
		},

		// 搜索输入
		onSearchInput() {
			if (!this.searchKeyword.trim()) {
				this.searchResults = [];
				return;
			}

			// 模拟搜索结果
			this.searchResults = [
				{
					name: 'Kumamon科技产业园',
					address: '苏州市工业园区星湖街328号'
				},
				{
					name: '苏州中心',
					address: '苏州市工业园区苏州大道东278号'
				},
				{
					name: '苏州国际金融中心',
					address: '苏州市工业园区苏州大道西9号'
				}
			].filter(item =>
				item.name.includes(this.searchKeyword) ||
				item.address.includes(this.searchKeyword)
			);
		},

		// 选择搜索结果地址
		selectAddress(address) {
			this.currentAddress = address.name;
			this.backToIndex();
		},

		// 选择城市
		selectCity(city) {
			if (!city.available) {
				uni.showToast({
					title: '该城市暂未开通服务',
					icon: 'none'
				});
				return;
			}

			this.selectedCity = city.name;
			uni.showToast({
				title: `已切换到${city.name}`,
				icon: 'success'
			});

			// 切换城市后返回首页
			setTimeout(() => {
				this.backToIndex();
			}, 1000);
		},

		// 滚动到指定字母
		scrollToLetter(letter) {
			this.currentLetter = letter;
			uni.pageScrollTo({
				selector: '#letter-' + letter,
				duration: 300
			});
		},

		// 字母触摸开始
		onLetterTouchStart(letter) {
			this.currentLetter = letter;
			this.showLetterTip = true;
			this.scrollToLetter(letter);
		},

		// 字母触摸结束
		onLetterTouchEnd() {
			this.showLetterTip = false;
		},

		// 切换城市选择器
		toggleCitySelector() {
			// 可以实现下拉展开效果或跳转到城市选择页面
			uni.showToast({
				title: '当前城市：' + this.selectedCity,
				icon: 'none'
			});
		},

		// 返回首页并传递选择的地址
		backToIndex() {
			// 通过全局事件或缓存传递选择的地址信息
			uni.setStorageSync('selectedAddress', this.currentAddress);
			uni.setStorageSync('selectedCity', this.selectedCity);

			uni.navigateBack({
				success: () => {
					// 触发首页刷新
					uni.$emit('addressChanged', {
						address: this.currentAddress,
						city: this.selectedCity
					});
				}
			});
		},

		// 显示反馈
		showFeedback() {
			uni.showToast({
				title: '感谢您的反馈',
				icon: 'none'
			});
		}
	},

	onLoad() {
		this.getSystemInfo();
	}
}
</script>

<style lang="scss">
.city-container {
	height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

// 顶部导航栏
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #fff;

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		position: relative;
	}

	.header-left {
		display: flex;
		align-items: center;
		width: 60rpx;
		height: 60rpx;
		justify-content: center;

		.back-text {
			font-size: 36rpx;
			color: #333;
		}

		&:active {
			opacity: 0.7;
		}
	}

	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;

		.more-text {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

		&:active {
			opacity: 0.7;
		}
	}

	.location-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;

		.location-btn-text {
			font-size: 28rpx;
		}

		&:active {
			opacity: 0.7;
		}
	}
}

// 内容区域
.content {
	flex: 1;
	height: 100%;
	overflow: hidden;
}

// 当前定位
.current-location {
	background-color: #fff;

	.location-item {
		display: flex;
		align-items: center;
		padding:24rpx 32rpx 12rpx;
		position: relative;

		.location-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
			margin-bottom: 24rpx;
		}
		.location-info {
			flex-grow: 1;
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;

 			 border-bottom: 1px solid #F2F2F2;
		}
		.location-title {
			font-size: 28rpx;
			color: #999999;
			margin-right: 16rpx;

		}

		.location-desc {
			flex-grow: 1;
			font-size: 28rpx;
			color: #333;
		}

		.refresh-btn {
			width: 32rpx;
			height: 32rpx;
			margin: 0 24rpx;
		}

		&:active {
			background-color: #f9f9f9;
		}
	}
}

// 城市选择器
.city-selector {
	background-color: #fff;

	.selector-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.selector-text {
			font-size: 28rpx;
			color: #333;
		}

		.selector-arrow {
			font-size: 20rpx;
			color: #666;
		}

		&:active {
			background-color: #f9f9f9;
		}
	}
}

.city-search-box {
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 24rpx;
}

// 搜索框
.search-section {
	flex-grow: 1;
	background-color: #fff;
	margin: 0 24rpx;

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		padding: 0 24rpx;
		height: 72rpx;
		border: 2rpx solid #e0e0e0;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-placeholder {
		color: #999;
	}
}

// 搜索结果
.search-results {
	background-color: #fff;

	.search-item {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.search-title {
			display: block;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 8rpx;
		}

		.search-desc {
			font-size: 24rpx;
			color: #999;
		}

		&:active {
			background-color: #f9f9f9;
		}

		&:last-child {
			border-bottom: none;
		}
	}
}

// 城市列表容器
.city-list-container {
	background-color: #fff;
	padding-bottom: 100rpx;

}

// 热门城市
.hot-cities {
	padding: 32rpx;
	border-bottom: 16rpx solid #f5f5f5;
	margin-bottom: 16rpx;

	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 24rpx;
	}

	.hot-city-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 40rpx;
	}

	.hot-city-item {
		flex: 1;
		min-width: 140rpx;
				min-height: 56rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: #EDEDED;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 12rpx;

		.hot-city-text {
			font-size: 28rpx;
			color: #333;
		}

		&.disabled {
			background-color: #f0f0f0;

			.hot-city-text {
				color: #ccc;
			}
		}

		&:not(.disabled):active {
			background-color: #e0e0e0;
		}
	}
}

// 按字母分组的城市
.alphabetic-cities {
	.city-group {
		.group-title {
			padding: 16rpx 32rpx;
			font-size: 24rpx;
			color: #999;
			background-color: #f8f8f8;
			font-weight: 500;
		}

		.city-items {
			.city-item {
				padding: 24rpx 32rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.city-name {
					font-size: 32rpx;
					color: #333;
				}

				&.disabled {
					.city-name {
						color: #ccc;
					}
				}

				&:not(.disabled):active {
					background-color: #f9f9f9;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
}

// 字母索引
.letter-index {
	position: fixed;
	right: 16rpx;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 24rpx;
	padding: 8rpx 0;

	.letter-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48rpx;
		height: 48rpx;

		.letter-text {
			font-size: 20rpx;
			color: #666;
			font-weight: 500;
		}

		&.active {
			background-color: #539DF3;
			border-radius: 50%;

			.letter-text {
				color: #fff;
			}
		}
	}
}

// 字母提示
.letter-tip {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	width: 120rpx;
	height: 120rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	.tip-text {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
	}
}
</style>
